﻿{% extends 'myblog/base.html' %}
{% block head %}
    {% if classify == '1' %}
        <title>网站前端</title>
    {% elif classify == '2' %}
        <title>后端技术</title>
    {% else %}
        <title>个人技术博客</title>
    {% endif %}
{% endblock %}

{% block body %}
    <div class="content-wrap"><!--内容-->
    <div class="content">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!--banner-->
                <ol class="carousel-indicators">
                    {% for i in adv %}
                        {% if forloop.first %}
                            <li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter }}"
                                class="active"></li>
                        {% else %}
                            <li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter }}"></li>
                        {% endif %}
                    {% endfor %}
                </ol>
                <div class="carousel-inner" role="listbox">
                    {% for p in adv %}
                        {% if forloop.counter == 1 %}
                            <div class="item active"><a href="content.html" target="_blank"><img
                                    src="/static/media/{{ p.img }}" style="width: 800px;height: 300px"
                                    alt=""/></a>
                                <div class="carousel-caption"> {{ p.title }}</div>
                                <span class="carousel-bg"></span></div>
                        {% else %}
                            <div class="item">
                                <a href="/detail/?id={{ p.id }}" target="_blank">
                                    <img src="/static/media/{{ p.img }}" style="width: 800px;height: 300px"  alt=""/>
                                </a>
                                <div class="carousel-caption">  {{ p.title }}</div>
                                <span class="carousel-bg"></span></div>
                        {% endif %}
                    {% endfor %}
                </div>
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
      </div>
      <!--/banner-->
      <div class="content-block hot-content hidden-xs">
        <h2 class="title"><strong>本周热门排行</strong></h2>
        <ul>
          {% for hot in hot_post %}
              {% if forloop.first %}
                  <li class="large">
                      <a href="/detail/?id={{ hot.id }}" target="_blank">
                      <img src="/static/media/{{ hot.img }}" alt="">
                      <h3> {{ hot.title }} </h3>
                      </a>
                  </li>
              {% else %}
                  <li>
                      <a href="/detail/?id={{ hot.id }}" target="_blank">
                      <img src="/static/media/{{ hot.img }}" alt="">
                      <h3> {{ hot.title}} </h3>
                      </a>
                  </li>
              {% endif %}
          {% endfor %}
        </ul>
      </div>
      <div class="content-block new-content">
        <h2 class="title"><strong>最新文章</strong></h2>
        <div class="row">
          {% for last_post in last_post_list %}
              <div class="news-list">
            <div class="news-img col-xs-5 col-sm-5 col-md-4">
                <a target="_blank" href="/detail/?id={{ last_post.id }}"><img src="/static/media/{{ last_post.img}}" alt="" style="width: 220px; height: 200px"></a>
            </div>
            <div class="news-info col-xs-7 col-sm-7 col-md-8">
              <dl>
                <dt> <a href="/detail/?id={{ last_post.id }}" target="_blank" >{{ last_post.title }}</a> </dt>
                <dd><span class="name"><a href="" title="{{ last_post.author}}" rel="author">{{ last_post.author }}</a></span> <span class="identity"></span> <span class="time"> {{ last_post.pub_time|date:"Y-m-d" }} </span></dd>
                  {% load filter %}
                <dd class="text">{{ last_post.content|safe|my_filter:50}}</dd>
              </dl>
                <div class="news_bot col-sm-7 col-md-8"> <span class="tags visible-lg visible-md"> <a href="">本站</a> <a href="">{{ last_post.tag }}</a> </span> <span class="look"> 共 <strong>{{ last_post.look }}</strong> 人围观 </span></div>
            </div>
          </div>
          {% endfor %}
        </div>
        <!--<div class="news-more" id="pagination">
        	<a href="">查看更多</a>
        </div>-->
      {# 如果有上一页的话，可以点击上一页，没有则设置为首页，其次如果有下一页，则设置可以点击下一页，否则设置为尾页 #}
        <div class="quotes" style="margin-top:15px">
            {# 首页设置 #}
            <a href="/index/?page=1&classify={{ classify }}&classify={{ classify }}">首页</a>
            {# 上一页设置 #}
            {% if last_post_list.has_previous %}
                <a href="/index/?page={{ last_post_list.previous_page_number }}&classify={{ classify }}">上一页</a>
            {% else %}
                <span class="disabled">上一页</span>
            {% endif %}

            {# 中间要显示页面数 #}
            {% for page in last_post_list.paginator.page_range %} {# 遍历页面列表 #}
                {% if page == last_post_list.number %}
                    <span class="current">{{ page }}</span>
                {% else %}
                    <a href="/index/?page={{ page }}&classify={{ classify }}">{{ page }}</a>
                {% endif %}
            {% endfor %}

            {# 下一页设置 #}
            {% if last_post_list.has_next %}
                <a href="/index/?page={{ last_post_list.next_page_number }}&classify={{ classify }}">下一页</a>
            {% else %}
                <span class="disabled">下一页</span>
            {% endif %}
            {# 尾页设置 #}
            <a href="/index/?page={{ last_post_list.paginator.num_pages }}&classify={{ classify }}">尾页</a>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
//页面加载
$('body').show();
$('.version').text(NProgress.version);
NProgress.start();
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
//返回顶部按钮
$(function(){
	$(window).scroll(function(){
		if($(window).scrollTop()>100){
			$(".gotop").fadeIn();
		}
		else{
			$(".gotop").hide();
		}
	});
	$(".gotop").click(function(){
		$('html,body').animate({'scrollTop':0},500);
	});
});
//提示插件启用
$(function () {
  $('[data-toggle="popover"]').popover();
});
$(function () {
	$('[data-toggle="tooltip"]').tooltip();
});
//鼠标滑过显示 滑离隐藏
$(function(){
	$(".carousel").hover(function(){
		$(this).find(".carousel-control").show();
	},function(){
		$(this).find(".carousel-control").hide();
	});
});
$(function(){
	$(".hot-content ul li").hover(function(){
		$(this).find("h3").show();
	},function(){
		$(this).find("h3").hide();
	});
});
//页面元素智能定位
$.fn.smartFloat = function() {
	var position = function(element) {
		var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离
		var pos = element.css("position"); //当前元素距离页面document顶部的距离
		$(window).scroll(function() { //侦听滚动时
			var scrolls = $(this).scrollTop();
			if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
				if (window.XMLHttpRequest) { //如果不是ie6
					element.css({ //设置css
						position: "fixed", //固定定位,即不再跟随滚动
						top: 0 //距离页面顶部为0
					}).addClass("shadow"); //加上阴影样式.shadow
				} else { //如果是ie6
					element.css({
						top: scrolls  //与页面顶部距离
					});
				}
			}else {
				element.css({ //如果当前元素element未滚动到浏览器上边缘，则使用默认样式
					position: pos,
					top: top
				}).removeClass("shadow");//移除阴影样式.shadow
			}
		});
	};
	return $(this).each(function() {
		position($(this));
	});
};
//启用页面元素智能定位
$(function(){
	$("#search").smartFloat();
});
//异步加载更多内容
jQuery("#pagination a").on("click", function ()
{
    var _url = jQuery(this).attr("href");
    var _text = jQuery(this).text();
    jQuery(this).attr("href", "javascript:viod(0);");
    jQuery.ajax(
    {
        type : "POST",
        url : _url,
        success : function (data)
        {
            //将返回的数据进行处理，挑选出class是news-list的内容块
            result = jQuery(data).find(".row .news-list");
            //newHref获取返回的内容中的下一页的链接地址
            nextHref = jQuery(data).find("#pagination a").attr("href");
            jQuery(this).attr("href", _url);
            if (nextHref != undefined)
            {
                jQuery("#pagination a").attr("href", nextHref);
            }
			else
            {
                jQuery("#pagination a").html("下一页没有了").removeAttr("href")
            }
            // 渐显新内容
            jQuery(function ()
            {
                jQuery(".row").append(result.fadeIn(300));
                jQuery("img").lazyload(
                {
                    effect : "fadeIn"
                });
            });
        }
    });
    return false;
});
</script>
{% endblock %}

